<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      
      <el-form 
        ref="userInfoForm" 
        :model="userInfo" 
        :rules="rules" 
        label-width="120px" 
        label-position="right"
        status-icon
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input 
                v-model="userInfo.email" 
                placeholder="邮箱" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input 
                v-model="userInfo.phone" 
                placeholder="电话" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="userInfo.name" 
                placeholder="姓名" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="userInfo.gender" placeholder="选择性别">
                <el-option label="男" value="Male"></el-option>
                <el-option label="女" value="Female"></el-option>
                <el-option label="其他" value="Other"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出生日期" prop="dateOfBirth">
              <el-date-picker
                v-model="userInfo.dateOfBirth"
                type="date"
                placeholder="选择出生日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DDTHH:mm:ss.sssZ"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number 
                v-model="userInfo.age" 
                :min="0" 
                :max="150"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="emergencyContact">
              <el-input 
                v-model="userInfo.emergencyContact" 
                placeholder="紧急联系人" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险卡号" prop="insuranceCardNumber">
              <el-input 
                v-model="userInfo.insuranceCardNumber" 
                placeholder="保险卡号" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户角色" prop="coreRole">
              <el-input 
                v-model="userInfo.coreRole" 
                readonly 
                placeholder="用户角色" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在线状态" prop="onlineStatus">
              <el-input 
                v-model="userInfo.onlineStatus" 
                readonly 
                placeholder="在线状态" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createdAt">
              <el-input 
                v-model="userInfo.createdAt" 
                readonly 
                placeholder="创建时间" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" prop="updatedAt">
              <el-input 
                v-model="userInfo.updatedAt" 
                readonly 
                placeholder="更新时间" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="fetchUserInfo">刷新信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  
  <script>
  import { ref, reactive, onMounted } from 'vue';
  import { selectUser } from '@/api/user'; // 假设你有一个 API 来获取管理员信息
  import {updatePatient} from '@/api/userManger'; // 假设你有一个 API 来获取管理员信息
    import {updateUser} from '@/api/userManger'; // 假设你有一个 API 来获取管理员信息
  import { ElMessage } from 'element-plus';


  export default {
    setup() {
      const userInfo = reactive({
        email: '',
        phone: '',
        name: '',
        gender: '',
        dateOfBirth: '',
        age: null,
        emergencyContact: '',
        insuranceCardNumber: '',
        coreRole: '',
        onlineStatus: null,
        createdAt: '',
        updatedAt: ''
      });

      const userDO = reactive({
        userId: localStorage.getItem('id'), // 假设你有一个 API 来获取管理员信息,
        email: '',
        phone: '',
      });

      const patientDO = reactive({
        userId: localStorage.getItem('id'), // 假设你有一个 API 来获取管理员信息,
        name: '',
        gender: '',
        dateOfBirth: '',
        age: null,
        emergencyContact: '',
        insuranceCardNumber: '',
      });
  
  
      // 表单规则
      const rules = reactive({
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: ['blur', 'change'] }
        ]
      });
  
      // 表单引用
      const userInfoForm = ref(null);
  
      // 获取用户信息
      const fetchUserInfo = async () => {
        try {
          // 这里使用 fetch 模拟从后端获取数据，实际项目中应该替换为 axios 或其他 HTTP 请求工具
          const response = await selectUser(localStorage.getItem('id'));
          
          
          // 整合信息
          if (response.code === '000') {
            const { userDO, patientDO } = response.data;
            userInfo.email = userDO.email;
            userInfo.phone = userDO.phone;
            userInfo.coreRole = userDO.coreRole || '未设置';
            userInfo.onlineStatus = userDO.onlineStatus || 0;
            userInfo.createdAt = userDO.createdAt;
            userInfo.updatedAt = userDO.updatedAt;
  
            if (patientDO) {
              userInfo.name = patientDO.name;
              userInfo.gender = patientDO.gender;
              userInfo.dateOfBirth = patientDO.dateOfBirth;
              userInfo.age = patientDO.age;
              userInfo.emergencyContact = patientDO.emergencyContact;
              userInfo.insuranceCardNumber = patientDO.insuranceCardNumber;
            }
          }
        } catch (error) {
          console.error('获取用户信息失败:', error);
          alert('获取用户信息失败，请稍后再试');
        }
      };
  
      // 提交表单
      const submitForm = async () => {
        userInfoForm.value.validate(async(valid) => {
          if (valid) {
            alert('提交成功!');
            userDO.userId = localStorage.getItem('id');
            userDO.phone = userInfoForm.phone;
            userDO.email = userInfoForm.email;
            patientDO.userId = localStorage.getItem('id');
            patientDO.name = userInfoForm.name;
            patientDO.gender = userInfoForm.gender;
            patientDO.dateOfBirth = userInfoForm.dateOfBirth;
            patientDO.age = userInfoForm.age;
            patientDO.emergencyContact = userInfoForm.emergencyContact;
            patientDO.insuranceCardNumber = userInfoForm.insuranceCardNumber;
            try {
              await updateUser(userDO); // 假设你有一个 API 来更新用户信息
              await updatePatient(patientDO); // 假设你有一个 API 来更新用户信息
            } catch (error) {
              console.error('更新用户信息失败:', error);
              alert('更新用户信息失败，请稍后再试');
            }
            
            
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      };
  
      // 重置表单
      const resetForm = () => {
        userInfoForm.value.resetFields();
      };
  
      // 页面加载时获取用户信息
      onMounted(() => {
        fetchUserInfo();
      });
  
      return {
        userInfo,
        rules,
        userInfoForm,
        submitForm,
        resetForm,
        fetchUserInfo
      };
    }
  }
  </script>
  
  <style scoped>
  .box-card {
    max-width: 1000px;
    margin: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: #606266;
  }
  
  .el-row {
    margin-bottom: 15px;
  }
  </style>